<!--
 * Description: 待办事项
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Chengming.Li
 * Date: 2020/12/08 10:14
-->
<template>
  <BaseWrap v-loading="isRequesting">
    <div class="to-do">
      <div class="top">
        <!-- FD todo -->
        <div
          v-for="item in dataTodo"
          :key="item.index"
          class="plate"
          :class="{ expand: selectIndex === item.index }"
          @click="loadChart(item.index)"
        >
          <div class="left">
            <!-- 左侧内容 -->
            <div class="title">
              <div class="text">{{ item.title }}{{ $t('Todo.todo') }}</div>

              <div class="icon">
                <el-tooltip
                  class="item"
                  :content="item.title + $t('Todo.todoNum')"
                  effect="dark"
                  placement="top"
                >
                  <div class="el-icon-warning-outline"></div>
                </el-tooltip>
              </div>
            </div>
            <!-- 数量 -->
            <div class="val">{{ item.total }}</div>
          </div>
          <!-- 右侧内容 -->

          <div class="right">
            <el-row>
              <el-col v-for="(todo, i) in item.right" :key="i" :span="12">
                <div class="member">
                  <div class="line">
                    <span class="circle" :style="{ backgroundColor: todo.color }"></span>
                    <span class="text">{{ todo.label }}</span>
                    <span class="num">({{ todo.val }})</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <!-- 底部图表 -->
      <div class="bottom">
        <div class="fd">
          <div class="pie">
            <div class="title">{{ dataTodo[selectIndex].title }}{{ $t('Todo.todoPie') }}</div>
            <FdPie
              v-if="dataTodo[0].isLoad && selectIndex === 0"
              :fdColor="fdColor"
              :fdData="dataTodo[0].data"
              style="height: calc(100% - 60px)"
            />
            <div v-else class="empty">暂无数据</div>
          </div>
          <div class="bar">
            <div class="title">{{ dataTodo[selectIndex].title }}{{ $t('Todo.todoBar') }}</div>
            <FdBar
              v-if="dataTodo[0].isLoad && selectIndex === 0"
              :fdColor="fdColor"
              :fdData="dataTodo[0].data"
              style="height: calc(100% - 60px)"
            />
            <div v-else class="empty">暂无数据</div>
          </div>
        </div>
      </div>
    </div>
  </BaseWrap>
</template>
<script>
import { fdTodo } from '@/api/quote/fd'
import FdBar from './components/FdBar'
import FdPie from './components/FdPie'
export default {
  name: 'Todo',
  components: { FdBar, FdPie },
  data() {
    return {
      //  当前选择展示模块
      selectIndex: 0,
      // fd颜色标识
      fdColor: {
        fdAppoint: '#2ec7c9',
        fdApprove: '#900048',
        fdAssign: '#c8b2f4',
        fdCost: '#d2e603',
        fdCostAssign: '#ff4b5c',
        fdFile: '#a2de96',
        fdRecieve: '#63c2ff',
        fdReject: '#ffcb8c'
      },
      // 是否正在请求
      isRequesting: false,
      dataTodo: [
        { index: 0, title: 'FD', data: {}, right: [], total: 0, isLoad: false },
        { index: 1, title: 'RFQ', data: {}, right: [], total: 0, isLoad: false },
        { index: 2, title: 'EC', data: {}, right: [], total: 0, isLoad: false },
        { index: 3, title: 'DFC', data: {}, right: [], total: 0, isLoad: false }
      ]
    }
  },
  computed: {},
  watch: {
    // 监听选中变化 请求不同接口获取数据
    selectIndex: {
      handler: function() {
        switch (this.selectIndex) {
          case 0:
            this.getFdList()
            break
          case 1:
            break
          default:
            break
        }
      },
      immediate: true
    }
  },

  mounted() {
    this.$nextTick(() => {
      if (document.getElementsByClassName('el-main')[0]) {
        document.getElementsByClassName('el-main')[0].style.backgroundColor = '#f0f2f5'
      }
    })
  },
  beforeDestroy() {
    if (document.getElementsByClassName('el-main')[0]) {
      document.getElementsByClassName('el-main')[0].style.backgroundColor = '#ffffff'
    }
  },

  methods: {
    // 加载FD待办数据
    async getFdList() {
      try {
        // 防止重复加载
        if (this.dataTodo[0].isLoad) return
        this.isRequesting = true
        const { data: res } = await fdTodo({})
        this.dataTodo[0].data = res
        this.dataTodo[0].total = res.fdCount
        this.dataTodo[0].right = [
          { label: '待指派', color: '#2ec7c9', val: res.fdAppoint },
          { label: '待接收', color: '#63c2ff', val: res.fdRecieve },
          { label: '已驳回', color: '#ffcb8c', val: res.fdReject },
          { label: '待分配', color: '#c8b2f4', val: res.fdAssign },
          { label: '估价待分配', color: '#ff4b5c', val: res.fdCostAssign },
          { label: '待估价', color: '#d2e603', val: res.fdCost },
          { label: '待审批', color: '#900048', val: res.fdApprove },
          { label: '待报价', color: '#a2de96', val: res.fdFile }
        ]

        this.dataTodo[0].isLoad = true
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    // 点击加载图表 展开选中行
    loadChart(index) {
      this.selectIndex = index
    }
  }
}
</script>
<style lang="scss" scoped>
.to-do {
  height: 100%;
  background-color: #f0f2f5;
}

.top {
  width: 100%;
  height: 160px;
  display: flex;
  padding: 0 10px;
  .plate {
    flex: 1;
    margin-right: 10px;
    height: 100%;
    background-color: #f3f3f3;
    transition: all 0.5s;
    box-shadow: 5px 5px 10px 0px #ccc;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    .left {
      flex: 1;
      height: 100%;
      display: flex;
      min-width: 50px;
      flex-direction: column;
      justify-content: center;
      .title {
        margin-top: -20px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        .text {
          font-size: 14px;
          color: #00000073;
          white-space: nowrap;
        }
        .icon {
          margin-left: 10px;
          transform: translateY(2px);
          cursor: pointer;
        }
        .el-icon-warning-outline {
          color: #b5b5b5;
          padding: 0;
          margin: 0;
        }
      }

      .val {
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 5px;
        font-size: 30px;
        color: #333;
      }
    }
    .right {
      flex: 2;
      height: 100%;
      display: flex;
      align-items: center;
      .member {
        flex: 1;
        margin-right: 15px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .line {
          height: 100%;
          display: flex;
          align-items: center;
          .circle {
            margin-right: 5px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: fuchsia;
          }
          .text {
            margin-right: 3px;
            font-size: 12px;
            color: #adabab;
            white-space: nowrap;
          }
          .num {
            font-size: 12px;
            color: #adabab;
            white-space: nowrap;
          }
        }
      }
    }
  }

  .expand {
    background-color: #fff;
    box-shadow: 0px 0px 20px 0 #87ceeb;
  }

  @media screen and(max-width: 1799px) {
    .plate {
      .right {
        display: none;
      }
    }
    .expand {
      flex: 2;
      flex-shrink: 0;
      .right {
        display: flex;
      }
    }
  }

  :nth-child(4) {
    margin-right: 0;
  }
}

.bottom {
  height: calc(100% - 170px);
  .fd {
    height: 100%;
    padding: 10px 10px 0;
    display: flex;
    .bar,
    .pie {
      flex: 1;
      height: 100%;
      background-color: #fff;
      .title {
        height: 60px;
        display: flex;
        align-items: center;
        color: #333;
        font-size: 16px;
        font-weight: 600;
        padding: 0 20px;
        border-bottom: 1px solid #e8e8e8;
      }
    }
    .pie {
      margin-right: 15px;
    }
    .empty {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translateY(-100px);
      font-size: 16px;
      color: #333;
    }
  }
}
</style>
